<script setup lang="ts">
import { computed } from 'vue'

// 定义props
const props = defineProps<{
  modelValue: string | boolean
  options?: {
    label: string
    value: string | boolean
  }[]
}>()

// 定义emits
const emit = defineEmits<{
  'update:modelValue': [value: string | boolean]
}>()

// 默认选项
const defaultOptions = computed(() => props.options || [
  { label: '是', value: '是' },
  { label: '否', value: '否' }
])

// 处理按钮点击
const handleButtonClick = (value: string | boolean) => {
  emit('update:modelValue', value)
}
</script>

<template>
  <div class="inline-flex rounded-md shadow-sm" role="group">
    <button 
      v-for="(option, index) in defaultOptions" 
      :key="index"
      type="button" 
      @click="handleButtonClick(option.value)"
      :class="[
        'px-4 py-2 text-sm font-medium border border-gray-200 hover:bg-blue-600',
        index === 0 ? 'rounded-l-lg' : '',
        index === defaultOptions.length - 1 ? 'rounded-r-lg' : '',
        modelValue === option.value ? 'bg-blue-500 text-white' : 'bg-white text-gray-700 hover:bg-gray-100'
      ]"
    >
      {{ option.label }}
    </button>
  </div>
</template>

<style scoped>
button {
  transition: all 0.3s ease;
}

button:hover {
  opacity: 0.9;
}

button:active {
  transform: translateY(0);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
</style>